<!DOCTYPE html>
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <title>Popover</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
    <script src="../../../../dist/js/ionic.bundle.js"></script>
    <script src="dom-trace.js"></script>
  </head>
  <body ng-controller="AppCtrl">

    <ion-header-bar class="bar-positive" title="Contacts">
      <div class="buttons">
        <button class="button button-icon ion-android-more" ng-click="openPopover($event)"></button>
      </div>
      <h1 class="title">Popover</h1>
      <div class="buttons">
        <button class="button" ng-click="openPopover2($event)">Popover 2</button>
        <button class="button" ng-click="openPopover($event)">Popover</button>
        <button class="button" ng-click="openPopover($event)">Popover</button>
      </div>
    </ion-header-bar>

    <ion-content class="padding">
      Content? Yes, content.
    </ion-content>

    <ion-footer-bar class="bar-subfooter">
      <button class="button" ng-click="setPlatform('ios')">iOS</button>
      <button class="button" ng-click="setPlatform('android')">Android</button>
      <button class="button" ng-click="setPlatform('base')">Base</button>
    </ion-footer-bar>

    <ion-footer-bar>
      <div class="buttons">
        <button class="button button-icon ion-android-more" ng-click="openPopover($event)"></button>
      </div>
      <h1 class="title">Popover</h1>
      <div class="buttons">
        <button class="button" ng-click="openPopover2($event)">Popover 2</button>
        <button class="button" ng-click="openPopover($event)">Popover</button>
        <button class="button" ng-click="openPopover($event)">Popover</button>
      </div>
    </ion-footer-bar>


    <script id="popover.html" type="text/ng-template">
      <ion-popover-view ng-controller="PopoverCtrl">
        <ion-header-bar>
          <h1 class="title">Popover Header</h1>
        </ion-header-bar>
        <ion-content>
          <div class="list">
            <label class="item item-input">
              <span class="input-label">First Name</span>
              <input type="text" placeholder="">
            </label>
            <label class="item item-input">
              <span class="input-label">Last Name</span>
              <input type="text" placeholder="">
            </label>
            <label class="item item-input">
              <span class="input-label">Email</span>
              <input type="text" placeholder="">
            </label>
            <button class="button button-block button-positive" ng-click="hidePopover()">Hide Popover</button>
            <button class="button button-block button-positive" ng-click="openActionSheet()">ActionSheet</button>
            <button class="button button-block button-positive" ng-click="openPopup()">Popup</button>
          </div>
        </ion-content>
      </ion-popover-view>
    </script>


    <script id="popover2.html" type="text/ng-template">
      <ion-popover-view ng-controller="PopoverCtrl">
        <ion-content>
          <div class="list">
            <div class="item">
              Item 1
            </div>
            <div class="item">
              Item 2
            </div>
            <div class="item">
              Item 3
            </div>
            <div class="item">
              Item 4
            </div>
            <div class="item">
              Item 5
            </div>
            <div class="item">
              Item 6
            </div>
          </div>
        </ion-content>
      </ion-popover-view>
    </script>

    <script>
      angular.module('ionicApp', ['ionic'])

      .controller('AppCtrl', function($scope, $ionicPopover) {
        $scope.popover = $ionicPopover.fromTemplate('<ion-popover-view><div>hello, popover</div></ion-popover-view>');
        $scope.popover2 = $ionicPopover.fromTemplate('<ion-popover-view><div>hello, popover2</div></ion-popover-view>');

        $scope.openPopover = function($event) {
          $scope.popover.show($event);
        };
        $ionicPopover.fromTemplateUrl('popover.html', function(popover) {
          $scope.popover = popover;
        });

        $scope.openPopover2 = function($event) {
          $scope.popover2.show($event);
        };
        $ionicPopover.fromTemplateUrl('popover2.html', function(popover) {
          $scope.popover2 = popover;
        });

        $scope.setPlatform = function(p) {
          document.body.classList.remove('platform-ios');
          document.body.classList.remove('platform-android');
          document.body.classList.add('platform-' + p);
          document.title = 'Popover: ' + p;
        };

      })

      .controller('PopoverCtrl', function($scope, $ionicActionSheet, $ionicPopup) {
        $scope.hidePopover = function() {
          $scope.popover.hide();
        };

        $scope.openActionSheet = function() {
          $ionicActionSheet.show({

            // The various non-destructive button choices
            buttons: [
              { text: 'Share' },
              { text: 'Move' },
            ],

            // The text of the red destructive button
            destructiveText: 'Delete',

            // The title text at the top
            titleText: 'Modify your album',

            // The text of the cancel button
            cancelText: 'Cancel',

            // Called when the sheet is cancelled, either from triggering the
            // cancel button, or tapping the backdrop, or using escape on the keyboard
            cancel: function() {
            },

            // Called when one of the non-destructive buttons is clicked, with
            // the index of the button that was clicked. Return
            // "true" to tell the action sheet to close. Return false to not close.
            buttonClicked: function(index) {
              return true;
            },

            // Called when the destructive button is clicked. Return true to close the
            // action sheet. False to keep it open
            destructiveButtonClicked: function() {
              return true;
            }
          });
        };

        $scope.openPopup = function() {
          $ionicPopup.alert({
           title: 'Hey!',
           content: 'Don\'t do that!'
          }).then(function(res) {});
        };

      });

    </script>
  </body>
</html>
